<template>
    <!-- 订单信息部分 -->
    <headerTitle title="在线支付"></headerTitle>
    <h3>订单信息：</h3>
    <div class="order-info">
        <p>
            {{ order.restaurant.businessName }}

        </p>
        <p>&#165;{{ order.order.orderTotal - points / 100 }}</p>
    </div>

    <!-- 订单明细部分 -->
    <ul class="order-detailet" id="detailetBox">
        <li v-for="food in foods" :key="food">
            <p>{{ food.foodName }} {{ food.quantity > 0 ? ' X ' + food.quantity : '' }}</p>
            <p>&#165;{{ food.foodPrice }}</p>
        </li>

        <li v-if="payType == 0">
            <p>配送费</p>
            <p>&#165;{{ order.restaurant.deliveryPrice }}</p>
        </li>
        <li v-if="payType == 0">
            <p>积分抵扣</p>
            <p>&#165;{{ -points / 100 }}</p>
        </li>
    </ul>

    <!-- 支付方式部分 -->
    <ul class="payment-type">
        <li @click="payWay = index" v-for="(payImg, index ) in imgs" :key="index">
            <img :src="payImg">
            <i class="fa fa-check-circle" v-if="payWay == index"></i>
        </li>

    </ul>
    <div class="payment-button">
        <button @click="payOrder">确认支付</button>
    </div>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import { useRouter, useRoute } from 'vue-router'
import { getOrderRequest, payOrderRequest, apply4MembershipRequset } from '@/js/request';
import { ref } from 'vue'
let router = useRouter()
let route = useRoute()
let foods = ref([])
let imgs = ref([require("@/assets/img/alipay.png"), require("@/assets/img/wechat.png")])
let order = ref({
    order: {
        orderTotal: 0
    },
    restaurant: {
        businessName: ''
    }
})
let payType = ref(0)
let points = ref(0)
let payWay = ref(0)
let payOrder

if (route.query.id === "vip") {
    payType.value = 1
    points.value = 0
    order.value = {
        order: {
            orderTotal: 30
        },
        restaurant: {
            businessName: "成为超级会员"
        },
    }
    foods.value = [
        { foodName: '一个月超级会员', quantity: 0, foodPrice: 30 }
    ]

    payOrder = () => {
        apply4MembershipRequset(respon => {
            if (respon.data.code == 200) {
                alert("开通成功")
                router.back()
            } else if (respon.data.code == 400 && respon.data.detail.errorCode == 401) {
                if (confirm("需先登录")) {
                    router.push({ name: 'loginPage' })
                }

            }
        })
    }
} else {
    getOrderRequest(respon => {
        if (respon.data.code == 200) {
            order.value = respon.data.detail
            foods.value = respon.data.detail.foods
            points.value = respon.data.detail.points
        } else if (respon.data.code == 601) {
            alert("未能查询到该订单")
            router.replace({ name: 'root' })
        }
    }, route.query.id)
    payOrder = () => {
        payOrderRequest(respon => {
            if (respon.data.code == 200) {
                router.push({ name: 'myOrdersPage' })
            } else if (respon.data.code == 601) {
                alert("未能查询到该订单")
            } else if (respon.data.code == 602) {
                alert("订单已支付")
                router.replace({ name: 'myOrdersPage' })
            }
        }, route.query.id)
    }
}



</script>

<style lang="scss" scoped>
/****************** 订单信息部分 ******************/
h3 {
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw 4vw 0;

    font-size: 4vw;
    font-weight: 300;
    color: #999;
}

.order-info {
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-info p:last-child {
    color: orangered;
}

/****************** 订单明细部分 ******************/
.order-detailet {
    width: 100%;
}

.order-detailet li {
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-detailet li p {
    font-size: 3vw;
    color: #666;
}

/****************** 支付方式部分 ******************/
.payment-type {
    width: 100%;
}

.payment-type li {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-type li img {
    width: 33vw;
    height: 8.9vw;
}

.payment-type li .fa-check-circle {
    font-size: 5vw;
    color: #38CA73;
}

.payment-button {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
}

.payment-button button {
    width: 100%;
    height: 10vw;
    border: none;
    /*去掉外轮廓线*/
    outline: none;
    border-radius: 4px;
    background-color: #38CA73;
    color: #fff;
}
</style>